<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>蓝桥狮-电子宠物</title> 
	<link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/index.css" /> 
  </head> 
  <body>
    
    <div id="app">  
        <h1>电子宠物蓝桥狮</h1>
		<div class="top">
            <div class="left sk0"></div>
            <div class="right">
                <div class="infos">
                    <div class="form-group">
                        <label for="name">宠物昵称</label>
                        <input type="text" class="form-control" id="nickName" placeholder="请输入宠物昵称" aria-describedby="inputSuccess2Status">
                        <span id="vail_name" style="display: none;" class="help-block">请您检查输入的宠物昵称</span>
                    </div>
                     
                    <div class="btn-group" data-toggle="buttons">
                        <label class="btn btn-primary active">
                          <input type="radio" name="options" id="option1" value="true"> 穿衣服
                        </label>
                        <label class="btn btn-primary">
                          <input type="radio" name="options" value="false" id="option2"> 不穿衣服
                        </label> 
                    </div>
                    <div class="weight">
                        <!-- 体重 -->
                        <span id="weight"></span>
                        kg
                    </div> 
                </div>
            </div>
        </div>
        <div class="btns">
            <button type="button" class="btn btn-success" id="addWeight">吃零食，增加体重1kg</button> 
            <button type="button" class="btn btn-warning" id="loseWeight">跟它玩，减轻体重2kg</button>
        </div>
        <div class="console">
            <fieldset>
                <legend>行动记录</legend>
            </fieldset>
            <div id="list"></div> 
        </div>
    </div> 
    <script> 
	    // 获取DOM元素对象 
        const nickName = document.getElementById('nickName')
        const addWeight = document.getElementById('addWeight')
        const loseWeight = document.getElementById('loseWeight')
        const weightEle = document.getElementById('weight')
        const list = document.getElementById('list')
        const vail_name = document.getElementById('vail_name')
        const radioes = document.querySelectorAll('input[type=radio]')
        const formGroup = document.querySelectorAll('.form-group')
        const clothes = document.querySelector('input[type=radio]:checked')
        const avatar = document.querySelector('.left')
        // 父类 
        class Lion {
            constructor(weight) {
                this.type = '狮子';
                this.weight = weight;
            }
            // TODO 体重增加
            addWeight() { 
                return ++this.weight;
            }
            // TODO 体重减轻
            loseWeight() { 
                return --this.weight;
            }
        }
        // 子类
        class MyPet extends Lion {
            constructor(name = '', haveClothes, weight = 60) {
                super(weight)
                this.name = name; 
                this.haveClothes = haveClothes;  
                weightEle.innerText = weight;
            } 
            // TODO 待补充代码 行动记录
            actionLog(stat,isAddWeght) {
                this.name = nickName.value;
                if(!this.name) {
                    formGroup[0].classList.add('has-error')
                    vail_name.style.display = 'block'
                    return;
                } else {
                    formGroup[0].classList.remove('has-error')
                    vail_name.style.display = 'none'
                } 
                let clothStat = this.haveClothes?'穿了衣服':'不穿衣服' 
                // 显示体重
                weightEle.innerText = isAddWeght? pet.addWeight() : pet.loseWeight(); 
                // XX在09:34分，吃了零食，体重 +1kg 
                list.innerHTML += `<div>${this.name}${clothStat}，${stat} ， 现在体重：${this.weight}kg</div>`
            }
        }

        const pet = new MyPet(nickName.value,true) 
        // 穿衣服按钮点击后的逻辑
        for(let i = 0; i < radioes.length; i++) {
            radioes[i].addEventListener('click',()=>{  
                radioes[i].parentElement.classList.add('active')
                if(i) { 
                    radioes[0].parentElement.classList.remove('active') 
                    pet.haveClothes = false;
                    console.log(avatar); 
                    avatar.classList.add('sk1')
                } else { 
                    radioes[1].parentElement.classList.remove('active')  
                    pet.haveClothes = true;
                    avatar.classList.remove('sk1')
                } 
            }) 
        }
        // 增加当前体重 
        addWeight.onclick = () => {   
            pet.actionLog('吃了零食，体重 +1kg',true)  
                
        }
         // 减轻当前体重 
        loseWeight.onclick = () => { 
            pet.actionLog('跟主人玩，体重 -1kg',false)
        } 
    </script>
  </body>
</html>
